<script lang="ts">
export default {
  //组件名称
  name: "ls-message",
};
</script>
<script setup lang="ts">
import { ref, watch, reactive, getCurrentInstance } from "vue";

const isShow = ref(false);

const enum ColorStyle { // 颜色主题对象
  info = "#1677FF",
  success = "#52c41a",
  error = "#ff4d4f",
  warn = "#faad14",
  loading = "#1677FF",
}

/* 限制类型 */
interface Props {
  type?: string;
  content?: string;
  duration?: number; // 持续时间
  top?: number | string; //距离顶部
  width?: string; //宽度
  height?: string; //高度
  fontSize?: string; //字体大小
  fontColor?: string /* 字体颜色 */;
  shake?: boolean /* 是否抖动 */;
}
interface currentClickValue {
  clickItem: [Props];
}
interface clickContent {
  clickContentItem: Props[];
}
/* 设置默认的message */
const currentClickValue = reactive<currentClickValue>({
  clickItem: [
    {
      type: "",
      content: "",
      duration: 3000,
      top: "",
      width: "200",
      height: "200",
      fontSize: "10",
      fontColor: "",
      shake: false,
    },
  ],
});
/* 点击排序数组 */
const clickContent = reactive<clickContent>({
  clickContentItem: [],
});

/* 当前提示框配置 */
function currentMessage(
  type: string,
  content: string,
  duration: number,
  top: number | string,
  width: string,
  height: string,
  fontSize: string,
  fontColor: string,
  shake: boolean
) {
  const currentClick = {
    type,
    content,
    duration,
    top,
    width,
    height,
    fontSize,
    fontColor,
    shake,
  };
  console.log(currentClick, "currentClick");

  currentClickValue.clickItem[0] = currentClick;
  console.log(currentClickValue.clickItem);
  clickContent.clickContentItem.push(currentClick);
  console.log(currentClick, clickContent.clickContentItem);
  showMessage(currentClick);
}
/* 触发info */
function info({
  type,
  content = "这是一条消息",
  duration = 3000,
  top = 30,
  shake = false,
  width = "170",
  height = "25",
  fontSize = "13",
  fontColor = "",
}: {
  type: string;
  content?: string;
  duration?: number;
  top?: number | string; //距离顶部
  width?: string; //宽度
  height?: string; //高度
  fontSize?: string; //字体大小
  fontColor?: string /* 字体颜色 */;
  shake?: boolean /* 是否抖动 */;
}) {
  currentMessage(
    type,
    content,
    duration,
    top,
    width,
    height,
    fontSize,
    fontColor,
    shake
  );
}
/* 触发success */
function success({
  type,
  content = "这是一条消息",
  duration = 3000,
  top = 30,
  shake = false,
  width = "170",
  height = "25",
  fontSize = "13",
  fontColor = "",
}: {
  type: string;
  content?: string;
  duration?: number;
  top?: number | string; //距离顶部
  width?: string; //宽度
  height?: string; //高度
  fontSize?: string; //字体大小
  fontColor?: string /* 字体颜色 */;
  shake?: boolean /* 是否抖动 */;
}) {
  currentMessage(
    type,
    content,
    duration,
    top,
    width,
    height,
    fontSize,
    fontColor,
    shake
  );
}
/* 触发warn */
function warn({
  type,
  content = "这是一条消息",
  duration = 3000,
  top = 30,
  shake = false,
  width = "170",
  height = "25",
  fontSize = "13",
  fontColor = "",
}: {
  type: string;
  content?: string;
  duration?: number;
  top?: number | string; //距离顶部
  width?: string; //宽度
  height?: string; //高度
  fontSize?: string; //字体大小
  fontColor?: string /* 字体颜色 */;
  shake?: boolean /* 是否抖动 */;
}) {
  currentMessage(
    type,
    content,
    duration,
    top,
    width,
    height,
    fontSize,
    fontColor,
    shake
  );
}
/* 触发error */
function error({
  type,
  content = "这是一条消息",
  duration = 3000,
  top = 30,
  shake = false,
  width = "170",
  height = "25",
  fontSize = "13",
  fontColor = "",
}: {
  type: string;
  content?: string;
  duration?: number;
  top?: number | string; //距离顶部
  width?: string; //宽度
  height?: string; //高度
  fontSize?: string; //字体大小
  fontColor?: string /* 字体颜色 */;
  shake?: boolean /* 是否抖动 */;
}) {
  currentMessage(
    type,
    content,
    duration,
    top,
    width,
    height,
    fontSize,
    fontColor,
    shake
  );
}
// 将函数挂载到 Vue 3 实例上
// if (currentInstance) {
//   currentInstance.appContext.config.globalProperties.message = message;
//   currentInstance.appContext.config.globalProperties.message.info = info;
//   currentInstance.appContext.config.globalProperties.message.success = success;
//   currentInstance.appContext.config.globalProperties.message.error = error;
//   currentInstance.appContext.config.globalProperties.message.warn = warn;
// }

/* 显示框 */
const showMessage = (currentClick: any) => {
  isShow.value = true;

  const intervalId = setInterval(() => {
    for (let i = 0; i < clickContent.clickContentItem.length; i++) {
      if (clickContent.clickContentItem[i].duration === currentClick.duration) {
        clickContent.clickContentItem.splice(i, 1);
        break;
      }
    }
    console.log(6666);

    clearInterval(intervalId);
  }, currentClick.duration);
};

defineExpose({
  info,
  success,
  warn,
  error,
});
</script>

<template>
  <div class="messageBox" :style="{}">
    <div class="message" v-if="clickContent.clickContentItem.length != 0">
      <TransitionGroup name="slide-fade">
        <div
          :class="['messageContent', { shake: item.shake }]"
          v-for="(item, index) in clickContent.clickContentItem"
          :style="{
            top: item.top + 'px',
            width: item.width + 'px',
            height: item.height + 'px',
            lineHeight: item.height + 'px',
            fontSize: item.fontSize + 'px',
            color: item.fontColor,
          }"
          :key="index"
        >
          <i
            :class="['iconfont', `icon-${item.type}`]"
            :style="{
              color: ColorStyle[item.type],
              fontSize: item?.fontSize * 1.8 + 'px',
            }"
          ></i>

          <div class="text">{{ item.content }}</div>
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 滑动渐变过渡效果
.slide-fade-move,
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.6s;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-16px);
  -ms-transform: translateY(-16px); /* IE 9 */
  -webkit-transform: translateY(-16px); /* Safari and Chrome */
  opacity: 0;
}
.slide-fade-leave-active {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.messageBox {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  .message {
    display: table-cell;
    vertical-align: middle;

    .messageContent {
      border: 1px solid rgb(224, 223, 223);
      margin: auto;
      border-radius: 10px;
      margin-top: 10px;

      padding: 9px 12px;
      width: fit-content;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      font-size: 500px;
      background-color: #fff;
      display: flex;
      align-items: center; /* 垂直居中 */
      .iconfont {
        margin-right: auto;
      }
      .text {
        width: fit-content;
        margin: auto;
      }
      // background: #fff;
      //background-color: aqua;
    }
  }
}
.shake {
  animation: shake 500ms;
}
@keyframes shake {
  /* 垂直抖动，核心代码 */
  10%,
  90% {
    transform: translate3d(0, -1px, 0);
  }
  20%,
  80% {
    transform: translate3d(0, +2px, 0);
  }
  30%,
  70% {
    transform: translate3d(0, -4px, 0);
  }
  40%,
  60% {
    transform: translate3d(0, +4px, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}
</style>
